http://www.rgraph.net/docs/csv-file-reader.html

A description of the CSV reader

Introduction
An example
API
Trailing end-of-lines
Database integration
Reading a DIV instead of a file
Demo pages

Introduction

As of October 2013 there is now a CSV reader class that is a part of RGraph. This class helps you fetch and read the contents of CSV files that are held on your server. This could make it easier for you to get information from your database - you can have a server-based script that gets data from your database and outputs it as a CSV file and then use this CSV reader to read it and get the data from it.

Alternatively you might have a CSV file that is generated by a server based application so you can read it using this CSV reader.

The chart to the right uses the CSV reader to fetch this file and then format into usable data.

An example

<script>
    window.onload = function ()
    {
        /**
        * This fetchs the CSV file and shows the Bar chart
        */
        var csv = new RGraph.CSV('/sample.csv', function (csv)
        {
            // Get the first column which becomes the labels
            var labels = csv.getCol(0);
            
            // Get the number of rows in the CSV
            var numrows = csv.numrows;

            // Get the number of cols in the CSV
            var numcols = csv.numcols;

            // Get the second column which becomes the data
            var data = csv.getCol(1);
            
            
            // Create the chart
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: data,
                options: {
                    labels: labels,
                    title: 'A chart using the CSV reader',
                    colors: ['red'],
                    strokestyle: 'white',
                    noxaxis: true,
                    shadowColor: '#aaa'
                    textAccessible: true,
                    textSize: 14
                }
            }).draw()
        })
    }
</script>

API

Constructor(URL, callback[, seperator[, endofline]])
You use the constructor to create and fetch the CSV file. It takes two arguments:

URL
This is the URL of the CSV file to fetch. Because of AJAX security restrictions it should be of the same domain as the file that's making the request. This can also be a string containing the ID of a tag tht you want to get data from - such as id:myDiv

callback
This should be a function that creates the chart. The function is passed the CSV object as an argument so that you can access the data.

seperator
You can optionally specify the field-seperator to use. This is given directly to the JavaScript split() function so it can either be a string or a regular expression. It defaults to: , (a comma)

endofline
You can optionally specify the endofline to use. This is given directly to the JavaScript split() function so it can either be a string or a regular expression. It defaults to: /\r?\n/

row = getRow(index[, start])
This function fetchs a row of data from the CSV and returns it (as an array). You can optionally give the column index to start at (the column numbering starts from 0). eg row = csv.getRow(3, 1);

col = getCol(index[, start])
This function fetchs a column of data from the CSV and returns it (as an array). You can optionally give the row index to start at (the row numbering starts from 0). eg col = csv.getCol(3, 1);

Trailing end-of-lines

Note that trailing EOLs (eg \r\n) are stripped automatically.

Database integration

By using the CSV file reader you can make integrating with a database easier. You can have a server-side script that retrieves data from the database and outputs it like this (or like this). You can then request that CSV file using the CSV file reader and that allows you to get the data into RGraph.

Reading a DIV instead of a file

Instead of reading a CSV file from your server you can also embed the CSV data in a hidden DIV in your page. If your server has high response times you may prefer this in place of an extra AJAX round-trip to your server to fetch the data.

The code is very similar though instead of a filename you would use a DIV tags ID - like this:

<script>
    window.onload = function ()
    {
        /**
        * This fetchs the CSV file and shows the Bar chart
        */
        var csv = new RGraph.CSV('id:myDiv', function (csv)
        {
            // Create the chart here
        }
    }
</script>

If you view the source of the page you can see the hidden DIV tag (at the bottom of the page) which contains the CSV data.